<template>
  <div style="height:900px">
    <div class="w100" ref="chart" style="height:900px"></div>
  </div>
</template>
<script>
import {selectRecord } from "@/api/trace/dataStatistics";
import chinaMap from './china.json'
export default {
  data () {
    return {}
  },
  props:{
      baseId:Number
  },
  watch:{
      baseId:{
        handler:async function(n){
          if(n){
              await this.$nextTick();
              this.loadMapChart();
          }
        },
        immediate:true
      }
  },
  methods: {
    async loadMapChart(){
        var option = {
           title:{
               text:'地图统计图表',
               subtext:'',
               x:'center',
               y:'top',
               textStyle:{
                   color:'#2b7',
                   fontSize:20,
                   fontWeight:'bold'
               },
               subtextStyle:{
                color:'#C0C4CC',
                fontSize:'15',
                height:'40',
                lineHeight:'40'
                }
           },
           toolbox:{},
           visualMap:{
               min:0,
               max:1000,
               show:true,
               type:'piecewise',
               pieces:[
              {gt: 1500},            // (1500, Infinity]
               {gt: 900, lte: 1500},  // (900, 1500]
               {gt: 310, lte: 1000},  // (310, 1000]
               {gt: 200, lte: 300},   // (200, 300]
               {gt: 0, lte: 200, color:'#2b7'}, ],
               textStyle: {
                color: '#ffffff'
              }},
           geo:{
               map:'china',
               roam:true,
               show:true,
               zoom:1.3,
               top:250,
               select:{
                disabled:false
               },
               itemStyle:{
                   borderColor:'#fff',
                   borderWidth:2,
                   areaColor:'#243c48'
               }
           },
           tooltip:{
               show:true,
               formatter:function(param){
                   return `在${param.data.name}查询了${param.data.value[2]}次`
               }
           },
           series:[
               {
                   type:'scatter',
                   symbol:'image://',
                   symbolSize:'28',
                   coordinateSystem:'geo',
                   data:null,
                   label:{
                       show:false
                   }
               }
           ],
        };
        const { rows } = await selectRecord(this.baseId);
        //数据
        option.series[0].data = rows.map(item=>({
            name:item.queryCity,
            value:[item.queryCoordinate.split(',')[0],item.queryCoordinate.split(',')[1],item.queryCount]
        }));
        //查询次数
        let i=0;
        rows.forEach(item=>{
            i+=item.queryCount;
        })
        option.title.subtext=`我们的产品走过了${rows.length}个城市，被客户查询了${i}次`;
        let myChart = this.$echarts.init(this.$refs.chart);
        this.$echarts.registerMap("china", { geoJSON: chinaMap });
        myChart.setOption(option);
        window.onresize = function() {
            myChart.resize();
        };
    }
    //   mapChart(this.$refs.chart, data, i,'rgb(28, 61, 73)','rgb(64, 219, 165)',{fontSize:30});

  }
}
</script>
<style >
</style>
